<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';

import { Page } from '@vben/common-ui';

import {
  CommentOutlined,
  HomeOutlined,
  PropertySafetyOutlined,
  TransactionOutlined,
} from '@ant-design/icons-vue';

import CustomerInfoDescription from '#/views/hm/customer/component/customer-info-description.vue';
import CustomerInfoMoneyEenter from '#/views/hm/customer/component/customer-info-moneyEnter.vue';
import CustomerInfoMoneyOut from '#/views/hm/customer/component/customer-info-moneyOut.vue';
import CustomerInfoVisit from '#/views/hm/customer/component/customer-info-visit.vue';

const routes = useRoute();
// 获取路由参数
const customerId = routes.params.customerId as string;

// 客户详情
const tabList = [
  {
    key: 'customerInfo',
    tab: '客户详情',
  },
];
const key = ref('customerInfo');
const onTabChange = (value: string, type: string) => {
  console.log(value, type);
  if (type === 'key') {
    key.value = value;
  }
};

// 购买记录&回款记录
const tabListMoney = [
  {
    key: 'moneyOut',
    tab: '购买记录',
  },
  {
    key: 'moneyEnter',
    tab: '回款记录',
  },
];
const keyMoney = ref('moneyOut');
const onTabChangeMoney = (value: string, type: string) => {
  console.log(value, type);
  if (type === 'key') {
    keyMoney.value = value;
  }
};

// 被回访记录
const tabListVisit = [
  {
    key: 'visit',
    tab: '被回访记录',
  },
];
const keyVisit = ref('visit');
const onTabChangeVisit = (value: string, type: string) => {
  console.log(value, type);
  if (type === 'key') {
    keyVisit.value = value;
  }
};
</script>

<template>
  <Page :auto-content-height="true">
    <!-- 客户详情 -->
    <a-card
      class="mb-10"
      style="width: 100%"
      :tab-list="tabList"
      :active-tab-key="key"
      @tab-change="(key) => onTabChange(key, 'key')"
    >
      <template #customTab="item">
        <span v-if="item.key === 'customerInfo'">
          <HomeOutlined />
          {{ item.tab }}
        </span>
      </template>
      <CustomerInfoDescription :customer-id="customerId" />
    </a-card>
    <!-- 购买记录/回款记录-->
    <a-card
      class="mb-10"
      style="width: 100%"
      :tab-list="tabListMoney"
      :active-tab-key="keyMoney"
      @tab-change="(keyMoney) => onTabChangeMoney(keyMoney, 'key')"
    >
      <template #customTab="item">
        <span v-if="item.key === 'moneyOut'">
          <PropertySafetyOutlined />
          {{ item.tab }}
        </span>
        <span v-if="item.key === 'moneyEnter'">
          <TransactionOutlined />
          {{ item.tab }}
        </span>
      </template>
      <span v-if="keyMoney === 'moneyOut'">
        <CustomerInfoMoneyOut :customer-id="customerId" />
      </span>
      <span v-if="keyMoney === 'moneyEnter'">
        <CustomerInfoMoneyEenter :customer-id="customerId" />
      </span>
    </a-card>
    <!-- 被回访记录-->
    <a-card
      class="mb-10"
      style="width: 100%"
      :tab-list="tabListVisit"
      :active-tab-key="keyVisit"
      @tab-change="(keyVisit) => onTabChangeVisit(keyVisit, 'key')"
    >
      <template #customTab="item">
        <span v-if="item.key === 'visit'">
          <CommentOutlined />
          {{ item.tab }}
        </span>
      </template>
      <CustomerInfoVisit :customer-id="customerId" />
    </a-card>
  </Page>
</template>

<style scoped lang="scss"></style>
